
<template>
    <ContentWrap>
        <el-form :model="query" class="mb-20px" inline label-width="70px" @submit.enter.prevent="queryFirstHandle">
            <el-form-item label="应用搜索">
                <el-input v-model="query.keyword" />
            </el-form-item>
            <el-form-item label="应用状态">
                <el-select class="select-c" clearable placeholder="请选择">
                    <!-- <el-option v-for="item in charSetSelectOption" :key="item.value" :label="item.label"
                        :value="item.value" /> -->
                </el-select>
            </el-form-item>
            <el-form-item label="应用类型">
                <el-select class="select-c" clearable placeholder="请选择">
                    <!-- <el-option v-for="item in charSetSelectOption" :key="item.value" :label="item.label"
                        :value="item.value" /> -->
                </el-select>
            </el-form-item>
            <el-form-item label="">
                <el-button type="primary" @click="queryFirstHandle">
                    <Icon icon="ant-design:search-outlined" class="mr-5px" />搜索
                </el-button>
                <el-button type="info" @click="queryResetHandle">
                    <Icon icon="ant-design:redo-outlined" class="mr-5px" />重置
                </el-button>
            </el-form-item>
        </el-form>
        <div class="">
            <el-button type="primary" @click="searchHandle">
                <Icon icon="ant-design:sync-outlined" class="mr-5px" />刷新
            </el-button>
        </div>
        <el-table :data="pageData.list" v-loading="loading" header-row-class-name="cc-table" border
            highlight-current-row style="width: 100%;margin-top: 20px;">
            <el-table-column prop="name" label="软件名称" width="180" show-overflow-tooltip />
            <el-table-column prop="developer" label="开发商" width="180" show-overflow-tooltip />
            <el-table-column prop="description" label="说明" min-width="220" show-overflow-tooltip />
            <el-table-column prop="price" label="价格" width="80" show-overflow-tooltip />
            <el-table-column prop="time" label="到期时间" width="120" show-overflow-tooltip />
            <el-table-column prop="location" label="位置" width="180" show-overflow-tooltip />
            <el-table-column prop="statusName" label="状态" width="80" show-overflow-tooltip></el-table-column>
            <el-table-column prop="" label="首页显示" width="90" show-overflow-tooltip />
            <el-table-column fixed="right" label="操作" width="160">
                <template #default="scope">
                    <!-- <el-button link type="primary" v-if="scope.row.status === '1'" size="small">更新</el-button> -->
                    <el-button link type="primary" v-if="scope.row.status === '1'" size="small"
                        @click="setHandle(scope.row)">设置</el-button>
                    <el-button v-if="scope.row.status === '0'" link type="primary" size="small"
                        @click="installHandle(scope.row)">安装</el-button>
                    <el-button v-else-if="scope.row.status === '1'" link type="primary" size="small"
                        @click="uninstallHandle(scope.row)">卸载</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="flex justify-end p-t-10px">
            <el-pagination v-model:current-page="queryPage.pageNumber" v-model:page-size="queryPage.pageSize"
                :page-sizes="[10, 20, 50]" layout="total, sizes, prev, pager, next, jumper" :total="pageData.total"
                @size-change="queryFirstHandle" @current-change="searchHandle" />
        </div>
    </ContentWrap>
    <infoModal v-model="infoModalVisible" @confirm="searchHandle"></infoModal>
    <MySQLSet v-model="setModalVisible.MySQL" :info="detailInfo" />
    <RedisSet v-model="setModalVisible.Redis" :info="detailInfo" />
    <DockerSet v-model="setModalVisible.Docker" :info="detailInfo" />
    <NginxSet v-model="setModalVisible.Nginx" :info="detailInfo" />
    <PHPSet v-model="setModalVisible.PHP" :info="detailInfo" />
    <OpenRestySet v-model="setModalVisible.OpenResty" :info="detailInfo" />
    <TenginxSet v-model="setModalVisible.Tenginx" :info="detailInfo" />
    <ApacheSet v-model="setModalVisible.Apache" :info="detailInfo" />
    <FTPSet v-model="setModalVisible.FTP" :info="detailInfo" />
    <FirewalldSet v-model="setModalVisible.firewalld" :info="detailInfo" />
</template>
<script setup lang="ts">
import { ref, reactive, onMounted } from "vue"
import { getAppManageListAPI, putAppManageInstallAPI } from "@/api/systemMonitor/index"
import { ContentWrap } from '@/components/ContentWrap'
import infoModal from './components/infoModal.vue'
import MySQLSet from './MySQL/Index.vue'
import RedisSet from './Redis/Index.vue'
import DockerSet from './Docker/Index.vue'
import NginxSet from './Nginx/Index.vue'
import PHPSet from './PHP/Index.vue'
import OpenRestySet from './OpenResty/Index.vue'
import TenginxSet from './Tenginx/Index.vue'
import ApacheSet from './Apache/Index.vue'
import FTPSet from './FTP/Index.vue'
import FirewalldSet from './Firewalld/Index.vue'
import { ElMessage, ElMessageBox } from 'element-plus'

//table loading
const loading = ref(false)
const infoModalVisible = ref(false)
const setModalVisible = reactive({
    MySQL: false,
    Redis: false,
    Docker: false,
    Nginx: false,
    PHP: false,
    OpenResty: false,
    Tenginx: false,
    Apache: false,
    FTP: false,
    firewalld: false,
})
//详情数据
const detailInfo = ref(undefined)

//默认查询条件
const defaultQuery = {
    keyword: ""
}
let query = reactive({
    ...defaultQuery
})

const queryPage = reactive({
    pageNumber: 1,
    pageSize: 10
})
const pageData = reactive({
    list: null,
    total: 0
})

onMounted(() => {
    queryFirstHandle()
})

//查询第一页
const queryFirstHandle = () => {
    queryPage.pageNumber = 1
    searchHandle()
}
//重置
const queryResetHandle = () => {
    query = Object.assign(query, defaultQuery)
    queryFirstHandle();
}
//查询
const searchHandle = () => {
    loading.value = true;
    getAppManageListAPI({ ...queryPage, ...query }).then((res) => {
        pageData.list = res.data.list
        pageData.total = res.data.total
    }).finally(() => {
        loading.value = false;
    })
}

// 安装
const installHandle = (row) => {
    ElMessageBox.confirm(`是否确定[${row.id}]安装?`, '安装', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
        customClass: 'delete-dialog'
    }).then(() => {
        putAppManageInstallAPI({ id: row.id }).then(() => {
            ElMessage.success("安装成功")
            searchHandle()
        })
    }).catch(() => { })
}
//设置
const setHandle = (row) => {
    detailInfo.value = row
    setModalVisible[row.id] = true;
}

const uninstallHandle = (row) => {
    ElMessage.error("功能待开发")
}
</script>
